<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单统计</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/echarts/echarts.js"></script>
    <link rel="stylesheet" href="/css/statistics/heat/heat.css"/>
</head>
<body>
<div class="box">
    <!--商品点击热度-->
    <div class="list">
        <div class="list-left">
            <div class="list-left-left"></div>
            <p class="list-left-right">订单分类</p>
        </div>
        <div class="list-right">
            <div class="list-right-left layui-btn layui-icon layui-icon-refresh" id="refresh">&nbsp;刷新</div>
            <div class="list-right-right layui-btn layui-icon layui-icon-left" id="goBack">返回</div>
        </div>
    </div>
    <div class="btns">
        <button class="layui-btn layui-btn-lg btn_style btn_default" style="color: #FFFFFF;" id="productOrder">商品</button>
        <button class="layui-btn layui-btn-lg btn_style" id="courseOrder">课程</button>
    </div>
    <div class="layui-row query">
        <div class="layui-col-md11">
            <div class="layui-card headerCenter">
                <div class="layui-card-header backColor">
                    <i class="layui-icon">&#xe613;</i>
                    订单分类
                </div>
                <div class="layui-card-body">
                    <table style="margin-left: -15px;">
                        <tr id="product">
                            <td>订单分类</td>
                        </tr>
                        <tr style="background:#F3F3F3" id="hits">
                            <td>订单数量</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!--Echars-->
    <div class="record">
        <div style="float: left;">
            <p style="margin-left: 20px;font-size: 15px;font-weight: 600">课程热度排行图表</p>
            <p style="margin-left: 20px;font-size: 12px;color:#D3D3D3">思云产品</p>
        </div>
        <div style="height: 90px;width: 200px; float: right;  text-align: center; margin-top: 25px;margin-right: 100px" id="day">
            <i onclick="circular()" class="layui-icon layui-icon-menu-fill" style="font-size: 20px;margin-right: 5px"></i>
            <i onclick="strip()" class="layui-icon layui-icon-chart" style="font-size: 20px;margin-right: 5px"></i>
            <i onclick="column()" class="layui-icon layui-icon-template-1" style="font-size: 20px;margin-right: 5px"></i>
            <i onclick="reload()" class="layui-icon layui-icon-refresh" style="font-size: 20px;margin-right: 5px"></i>
            <i onclick="downLoad()" class="layui-icon layui-icon-export" style="font-size: 20px;"></i>
        </div>
        <div id="main" style="width: 1660px; height: 500px;float: left;margin-top: -52px"></div>
    </div>
    <!-- 返回 -->
    <p id="title" style="display: none;">订单统计</p>
</div>

</body>
<script>
    var shopIdArr = [];
    var courseNameArr = [];
    var he = [];
    layui.use(["layer","jquery"],function () {
        var
            layer = layui.layer,
            $ = layui.jquery;
        product();
        $("#courseOrder").click(function () {
            $("#productOrder").css("backgroundColor","#FFFFFF");
            $("#courseOrder").css("backgroundColor","#009688");
            $("#productOrder").css("color","black");
            $("#courseOrder").css("color","#FFFFFF");
            dingdan();
        });
        $("#productOrder").click(function () {
            $("#productOrder").css("backgroundColor","#009688");
            $("#courseOrder").css("backgroundColor","#FFFFFF");
            $("#productOrder").css("color","#FFFFFF");
            $("#courseOrder").css("color","black");
            product();
        });
        $("#refresh").click(function () {
            location.reload();
        });
//返回
        $('#goBack').click(function () {
            var title = $('#title').text();
            var iframe = parent.$('.iframe');
            $.each(iframe,function (i,item) {
                if(title == $(item).attr('_href')){
                    parent.$('#beforeHref').val($(item).attr('_href'));
                    parent.beforeHref();
                    return;
                }
            });
        });
            function product(){
                $(".productzi").remove();
                $(".hitszi").remove();
                //查询所有商品订单
                $.ajax({
                    url:"/SyStatistical/getAllProductShowId",
                    data:{},
                    type:'post',
                    dataType:'json',
                    success:function (data) {

                        courseNameArr = [];
                        shopIdArr = [];
                        for (var i = 0 ; i < data.data.length ; i++){
                            if (i<data.data.length){
                                shopIdArr.push(data.data[i].shopId);
                                courseNameArr.push(data.data[i].productName);
                                $("#product").append('<td class="productzi">'+data.data[i].productName+'</td>');
                                $("#hits").append('<td class="hitszi">'+data.data[i].shopId+'</td>');

                                courseNameArr[i] = data.data[i].productName;
                                shopIdArr[i] = data.data[i].shopId;
                                he[i] = {value:shopIdArr[i],name:courseNameArr[i]};
                            }
                        }
                        circular(he);
                    }
                });
            }
            function dingdan() {

                $(".productzi").remove();
                $(".hitszi").remove();
                //查询所有课程订单
                $.ajax({
                    url:"/SyStatistical/getAllcourseCountShowId",
                    data:{},
                    type:'post',
                    dataType:'json',
                    success:function (data) {
                        courseNameArr = [];
                        shopIdArr = [];
                        for (var i = 0 ; i< data.data.length ; i++){

                            if (i<=5){
                                shopIdArr.push(data.data[i].shopId);
                                courseNameArr.push(data.data[i].courseName);
                                $("#product").append('<td class="productzi">'+data.data[i].courseName+'</td>');
                                $("#hits").append('<td class="hitszi">'+data.data[i].shopId+'</td>');

                                courseNameArr[i] = data.data[i].courseName;
                                shopIdArr[i] = data.data[i].shopId;
                                he[i] = {value:shopIdArr[i],name:courseNameArr[i]}
                            }

                        }
                        circular(he);

                    }
                });
            }
    })
    function reload(){
        location.reload();
    }
    var option;
    //扇形统计图
    function circular(){
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        option = {
            tooltip: {},
            series: [
                {
                    type: 'pie',
                    data: he,
                    roseType: 'area'
                }
            ],
            xAxis: {
                show: false
            },
            yAxis: {
                show: false
            }
        };
        option && myChart.setOption(option);
    }
    //折线统计图
    function strip() {
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        //var option;
        option = {
            xAxis: {
                show: true,
                type: 'category',
                data: courseNameArr
            },
            yAxis: {
                show: true,
                type: 'value'
            },
            series: [
                {
                    data: shopIdArr,
                    type: 'line'
                }
            ]
        };
        option && myChart.setOption(option);
    }
    //柱状统计图
    function column(){
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        //var option;
        option = {
            xAxis: {
                show: true,
                data: courseNameArr
            },
            yAxis: {show: true},
            series: [
                {
                    type: 'bar',
                    data: shopIdArr
                }
            ]
        };
        option && myChart.setOption(option);
    }
    //下载图表
    function downLoad(){
        var canvas = document.getElementsByTagName("canvas")
        if (canvas && canvas.length > 0) {
            var oA = document.createElement("a")
            oA.download = "Echarts图表" + ".png"
            oA.href = canvas[0].toDataURL("image/png")
            document.body.appendChild(oA)
            oA.click()
            oA.remove()
        }
    }
</script>
</html>